{% extends "auth.html" %}

{% block regular_content %}
<div>
   <h2 class="mx-4 lg:mx-16 px-2 mb-4">{{_('account_overview')}}</h2>
   <div class="flex flex-col gap-4 mx-4 lg:mx-16">
       {% if invitations %}
           <h1 class="section-header" id="my_messages" onclick="$ ('#messages').toggle()">{{_('my_messages')}}</h1>
           <div id="messages" data-cy="messages" class="profile-section-body" style="display: block;">
             <h2 class="profile-section-body-header">{{_('my_messages')}}</h2>
             {% for invite_data in invitations %}
                 <div class="[&:not(:last-child)]:mb-4" id="invitation_{{loop.index}}">
                     {{_('invite_message')}} "<span class="font-bold italic">{{ invite_data['class_name'] }}</span>".<br>
                     {{_('sent_by')}} "<span class="font-bold italic">{{ invite_data['teacher'] }}</span>". {{_('prompt_join_class')}}
                     <div class="flex flex-row mt-4">
                            <button type="reset" class="green-btn" id="join" data-cy="join_link"
                                hx-post="/class/join/{{invite_data['class_id']}}"
                                hx-swap="none"
                                _="on htmx:afterRequest
                                    if detail.xhr.status == '302'
                                        set window.location.pathname to {% if is_teacher %}'/for-teachers'{% else %}'/programs'{% endif %} 
                                    else if detail.xhr.status == '200'
                                         hide #messages
                                         remove #invitation_{{loop.index}}
                                    end"
                                >{{_('join_class')}}</button>
                            <button type="submit" class="red-btn mx-4 px-4" onclick="hedyApp.remove_student_invite('{{user_data['username']}}', '{{invite_data['class_id']}}', '{{_('delete_invite_prompt')}}')">{{_('delete_invite')}}</button>
                    </div>
                 </div>
             {% endfor %}
           </div>
       {% endif %}

       {% if user_data['is_teacher'] %}
         <h1 class="section-header" id="my_subscription" onclick="$ ('#subscription').toggle()">{{_('newsletter')}}</h1>
         <div id="subscription" data-cy="messages" class="profile-section-body"
              {% if not invitations and subscription_status != "subscribed" %} style="display: block;" {% endif %}>
           {% if subscription_status == "subscribed" %}
             <h2 class="profile-section-body-header">{{_('subscribed_header')}}</h2>
             <p class="mt-0 mb-6">{{_('subscribed_message')}}</p>
           {% elif subscription_status == "unsubscribed" %}
             <h2 class="profile-section-body-header">{{_('unsubscribed_header')}}</h2>
             <p class="mt-0 mb-6">{{_('unsubscribed_message')}}</p>
           {% else %}
             <div id="subscribe_panel">
               <h2 class="profile-section-body-header">{{_('subscribe_newsletter')}}</h2>
               <p class="mt-0 mb-6">{{_('subscribe_message')}}</p>
               <button class="green-btn" onclick="hedyApp.subscribe_to_newsletter();">{{_('subscribe')}}</button>
             </div>
             <div id="subscribed_panel" class="hidden">
               <h2 class="profile-section-body-header">{{_('subscribed_header')}}</h2>
               <p class="mt-0 mb-6">{{_('subscribed_message')}}</p>
             </div>
           {% endif %}
         </div>
       {% endif %}

       <h1 data-cy="profile_button" class="section-header" onclick="$ ('#public_profile_body').toggle()">{{_('public_profile')}}</h1>
       <div id="public_profile_body" class="profile-section-body" {% if request.args.get('open') == "public-profile" %} style="display: inline;"{% endif %}>
            <h2 class="profile-section-body-header">{{_('public_profile')}}</h2>
             <form id="public_profile" class="flex flex-col gap-4">
                 <div class="flex flex-col">
                     <h3 class="px-2 pt-0 pb-2 my-0 font-semibold">{{_('profile_picture')}}</h3>
                     <input name="image" id="image" type=number class="hidden" required {% if public_settings.image %} value="{{ public_settings.image }}" {% else %} value="1"{% endif %}>
                     <div class="flex flex-wrap justify-center gap-2 w-full border border-gray-400 rounded-lg p-4">
                        {% for i in range(1, 13) %}
                            <div class="w-32 h-32 rounded-lg relative profile_image {% if (public_settings.image and public_settings.image == i|string()) or (not public_settings.image and i == 1) %}border-2 border-blue-600{% endif %}" id="profile_image_{{ i }}" onclick="hedyApp.select_profile_image({{ i }});">
                                <div class="relative h-full">
                                    <img src="{{static('/images/profile_images/' + i|string() + '.png')}}" class="absolute p-1" alt="{{_('profile_logo_alt')}}">
                                </div>
                            </div>
                        {% endfor %}
                     </div>
                 </div>
                 <div class="flex flex-col">
                     <h3 class="px-2 pt-0 pb-2 my-0 font-semibold">{{_('personal_text')}}</h3>
                     <textarea class="block h-32 px-2 py-1 border border-gray-400 rounded-lg" data-cy="personal_text" name="personal_text" required maxlength="200" minlength="5" placeholder="{{_('your_personal_text')}}">{% if public_settings.personal_text %}{{ public_settings.personal_text }}{% endif %}</textarea>
                 </div>
                 {% if programs %}
                     <div>
                         <h3 class="px-2 pt-0 pb-2 my-0 font-semibold">{{_('favourite_program')}}</h3>
                         <select id="favourite_program" class="block appearance-none w-full text-gray-700 px-4 py-1 rounded-lg">
                            <option value="" selected disabled hidden>{{_('select')}}</option>
                            {% for program in programs %}
                                <option value="{{program.id}}" {% if public_settings.favourite_program and public_settings.favourite_program == program.id %} selected {% endif %}>{{program.name}}</option>
                            {% endfor %}
                        </select>
                     </div>
                 {% endif %}
                 <div class="flex flex-row gap-4 items-center border-gray-400 border p-4 rounded-lg">
                    <input id="agree_terms"  type="checkbox" name="agree_terms" data-cy="agree_terms" required
                           class="" {% if public_settings %}checked{% endif %}>
                    <label for="agree_terms" class="cursor-pointer w-full">{{_('public_profile_info')}}</label>
                 </div>
                 <div class="flex flex-row">
                    <button data-cy="submit_public_profile" type="submit" class="green-btn">{{_('update_public')}}</button>
                    {% if public_settings %}
                        <button type="reset" class="ml-auto red-btn" onclick="event.preventDefault(); hedyApp.destroy_public('{{_('are_you_sure')}}');">{{_('delete_public')}}</button>
                    {% endif %}
                 </div>
             </form>
       </div>
        <!-- If a user doesn't have an email it's a student created by a teacher -> not allowed to leave a class -->
       {% if user_classes and user_data['email'] %}
           <h1 class="section-header" onclick="$ ('#classes').toggle()">{{_('my_classes')}}</h1>
           <div id="classes" class="profile-section-body">
               <h2 class="profile-section-body-header">{{_('my_classes')}}</h2>
                <div class="flex flex-col gap-2">
                   {% for user_class in user_classes %}
                     <div id="student_class" class="border rounded-lg border-gray-400 px-4 py-2 flex flex-row items-center">
                        <p class="text-xl italic text-blue-600">{{ user_class['name']}}</p>
                        <button class="red-btn ltr:ml-auto rtl:mr-auto" onclick="hedyApp.remove_student('{{user_class['id']}}', '{{user_data['username']}}', '{{_('self_removal_prompt')}}')">{{_('leave_class')}}</button>
                     </div>
                   {% endfor %}
                </div>
           </div>
       {% endif %}
       <h1 class="section-header" onclick="$('#profile_change_body').toggle();" data-cy="personal_settings">{{_('settings')}}</h1>
       <div class="profile-section-body" id="profile_change_body">
        <form id="profile">
            <h2 class="profile-section-body-header">{{_('settings')}}</h2>
            <div class="flex flex-row items-center mb-2">
                <label for="username" class="inline-block w-72">{{_('username')}}</label><strong id="username" class="inline-block w-1/2 px-2">{{user_data['username']}}</strong>
            </div>
            <div class="flex flex-row items-center mb-2">
                <label for="email" class="inline-block w-72">{{_('email')}}</label><input id="email" name="email" type="email" class="personal-input" value="{{user_data['email']}}" {% if user_data['email'] %}required{% endif %}>
            </div>
            <div class="flex flex-row items-center mb-2">
                <label for="birth_year" class="inline-block w-72">{{_('birth_year')}}</label>
                <input id="birth_year" name="birth_year" class="personal-input" type="number" value="{{user_data['birth_year']}}">
            </div>
            <div class="flex flex-row items-center mb-2">
                <label for="language" class="inline-block w-72">{{_('preferred_language')}}</label>
                <select id="language" name="language" class="personal-input" required>
                    <option value="{{ current_language().lang}}">{{current_language().sym}}</option>
                    {% for language in other_languages() %}
                        <option value="{{language.lang}}">{{language.sym}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex flex-row items-center mb-2" id="keyword_lang_container"
                 {% if user_data and 'language' in user_data and (user_data['language'] not in keyword_languages_keys() or user_data['language'] == "en") %}style="display: none;"{% endif %}>
                <label for="keyword_language" class="inline-block w-72">{{_('preferred_keyword_language')}}</label>
                <select id="keyword_language" name="keyword_language" class="personal-input" required>
                    {% for language in keyword_languages() %}
                        <option value="{{language.lang}}" id="{{language.lang}}_option" class="keyword_lang_option"
                                {% if language.lang != user_data['language'] and language.lang != "en" %}style="display: none;"{% endif %}
                                {% if user_data and 'keyword_language' in user_data %}
                                    {% if user_data['keyword_language'] == language.lang %}selected{% endif %}
                                {% else %}
                                    {% if language.lang == "en" %}selected{% endif %}
                                {% endif %}>{{language.sym}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex flex-row items-center mb-2">
                <label for="gender" class="inline-block w-72">{{_('gender')}}</label>
                <select id="gender" name="gender" class="personal-input">
                  <option value=""}>{{_('select')}}</option>
                  <option value="f" {% if user_data['gender'] == "f" %}selected{% endif %}>{{_('female')}}</option>
                  <option value="m" {% if user_data['gender'] == "m" %}selected{% endif %}>{{_('male')}}</option>
                  <option value="o" {% if user_data['gender'] == "o" %}selected{% endif %}>{{_('other')}}</option>
                </select>
            </div>
            <div class="flex flex-row items-center mb-6">
                <label for="country" class="inline-block w-72">{{_('country')}}</label>
                <select id="country" name="country" class="personal-input">
                    <option value="">{{_('select')}}</option>
                    {% for alpha, name in all_countries() %}
                        <option value="{{ alpha }}" {% if alpha == user_data['country'] %}selected{% endif %}>{{ name }}</option>
                    {% endfor %}
                </select>
            </div>
        </form>
       </div>
      <h1 id="password_toggle" class="section-header" onclick="$ ('#change_password_body').toggle()">{{_('change_password')}}</h1>
        <div class="profile-section-body" id="change_password_body">
            <form id="change_password">
                <h2 class="profile-section-body-header">{{_('change_password')}}</h2>
                <div class="flex flex-row items-center mb-2">
                    <label for="old_password" class="inline-block w-72">{{_('current_password')}}</label>
                    <input id="old_password" name="old_password" class="personal-input" minlength="6" type=password role="presentation" autocomplete="off" required>
                </div>
                <div class="flex flex-row items-center mb-2">
                    <label for="new_password" class="inline-block w-72">{{_('new_password')}}</label>
                    <input id="new_password" name="new-password" class="personal-input" minlength="6" type=password role="presentation" autocomplete="new-password" required>
                </div>
                <div class="flex flex-row items-center mb-2">
                    <label for="password_repeat" class="inline-block w-72">{{_('repeat_new_password')}}</label>
                    <input id="password_repeat" name="password_repeat" class="personal-input" minlength="6" type=password role="presentation" autocomplete="new-password" required>
                </div>
                <button type="submit" class="green-btn mt-2">{{_('change_password')}}</button>
            </form>
        </div>
        {% if not is_teacher %}
          <h1 id="teacher_toggle" class="section-header" onclick="$ ('#turn_into_teacher_body').toggle()">{{_('request_teacher')}}</h1>
            <div class="profile-section-body text-center" id="turn_into_teacher_body">
                <button class="blue-btn" onclick="hedyApp.turn_into_teacher_account();">{{_('request_teacher_account')}}</button>
            </div>
        {% endif %}

        <h1 id="danger_zone" class="section-header-danger" data-cy="delete_profile"
            onclick="$ ('#danger_zone_body').toggle()">{{_('danger_zone')}}</h1>
          <div class="profile-section-body" id="danger_zone_body">
            <h2 class="profile-section-body-header">{{_('destroy_account')}}</h2>
            <p class="mt-0 mb-6">{{_('destroy_account_message')}}</p>
            <button class="red-btn" onclick="hedyApp.destroy('{{_('are_you_sure')}}')" data-cy="delete_profile_button">{{_('destroy_account')}}</button>
          </div>
   </div>
</div>
{% endblock %}
